<template>
    <div>
        <el-form
            ref="formDesgin"
            :model="formDesgin"
            :rules="desginRules"
            class="el-form"
            label-position="top"
            label-width="120px">
            <el-row class="addTitle">
                <h2>方法设计</h2>
            </el-row>
            <div class="formBody">
                    <el-tree 
                    class="tree-border"
                    :data="methodList"
                    show-checkbox
                    :default-checked-keys="checkList"
                    ref="menu"
                    node-key="taskId"
                    :check-strictly="false"
                    empty-text="加载中，请稍后"
                    :props="defaultProps"
                >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span v-if="data.methodExplain">
                        <span class="row">{{ node.label }}</span>
                    </span>
                    <span v-else>
                        <span class="row" >
                            {{ node.label }}
                        </span>
                        <!-- <span>
                            
                        </span> -->
                        <span>
                            <el-switch v-model="data.selectType" active-text="按成员分配" inactive-text="按机构分配" class="selectType"  inactive-color="#13ce66" @change= selectTypeFun(data)>
                            </el-switch>
                            <template v-if="data.selectType">
                                <el-select v-model="data.assignIds" multiple class="labelWidth2"   collapse-tags  @change="handleAssign($event,'userOptions')" placeholder="请选择" >
                                    <el-option
                                    v-for="item in userOptions"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </template>
                                <template v-else>
                                    <el-select v-model="data.assignIds" multiple  class="labelWidth2"  collapse-tags  @change="handleAssign($event,'agencyOptions')" placeholder="请选择"  >
                                            <el-option
                                                v-for="item in agencyOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                </el-select>
                            </template>
                                <el-input
                                class="remark"
                                v-model="data.remark"
                                placeholder="工作要求"
                            />
                        </span>
                    </span>
                </span>
                </el-tree>
                <el-row class="finishRow">
                    <el-button type="primary" @click="save">保存</el-button>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script>
import { listUserAll} from "@/api/system/user";
import { listAgencyAll } from "@/api/system/agency";
import { updateProZoneTask,getMethods} from "@/api/project/project";
import { listMethod2} from "@/api/method/method";
export default {
    name: 'methodDesign',
    props:{
        zoneId:{}
    },
    data() {
        return {
            //设计方法
            formDesgin:{},
            desginRules:{},
            methodList:[],
            methodList_copy:[],
            loading:false,
            userOptions:[],
            agencyOptions:[],
            defaultProps:{
                children: "methodTasks",
                label: "taskName"
            },
            //默认选中
            checkList:[],
            //上传表单
            form:{},
            //弹出层显示
            open:false,
            title:"上传数据",
            //文件列表
            fileList:[],
            //上传路径
            uploadUrl:""


        };
    },
    mounted() {
        this.getOptionsUser();
        this.getList();
    },
    watch:{
        checkList(val){
            this.$refs.menu.setCheckedKeys(val)
        }
    },
    methods: {
        //获取机构用户列表，并转为options数据
        getOptionsUser(){
            const Params = {
                pageNum: 1,
                pageSize: 10000};
            listUserAll().then(
                response => {
                    this.userOptions = response.data.map(item => { return {"id":item["userId"],"label":item["userName"],"telephone":item["telephone"],"agencyId":item["agencyId"]} })  
                }
            );
            listAgencyAll().then(
                response => {
                    this.agencyOptions = this.resetOptions(response.data,"agencyId","agencyName");
                }
            )
        },
        //用户选择联动
        resetUserInfo(value){
            const valueObj= this.userOptions.find((item)=>{return item.id === value;});
            this.formData.userName = valueObj.label;
            this.formData.telephone = valueObj.telephone;
            this.formData.agencyId = valueObj.agencyId
        },
        // 方法设计保存
        save(){
            let data = {
                    "zoneId":this.zoneId,
                    "assign":this.getMenuAllCheckedKeys()
            }
            updateProZoneTask(data).then(response => {
                this.msgSuccess("修改成功");
            })
        },
                /** 查询方法列表 */
        getList() {
            // 查询条件
            this.loading = true
            listMethod2().then(
                response => {
                    if(response.data){
                        this.methodList_copy = response.data;
                        this.methodList_copy.map(item=>{
                            item.taskId = item.methodId
                            item.taskName = item.methodName
                            if(item.methodTasks){
                                item.methodTasks.map(a=>{
                                    a.assignIds=[]
                                    a.selectType = true
                                })
                            }
                        })
                        this.loading = false;
                    }
                    this.getZoneMethod()
                }
            );
        },
        //获取当前分区的方法设计
        getZoneMethod(){
            getMethods(this.zoneId).then(res=>{
                // console.log(res)
               res.data.forEach(item2=>{
                    this.methodList_copy.map(item1=>{
                        if(item1.methodId==item2.methodId){
                            this.checkList.push(item2.methodId)
                            if(item2.tasks){
                                item1.methodTasks.map(item3=>{
                                item2.tasks.forEach(item4=>{
                                    if(item3.taskId==item4.taskId){
                                        if( item4.assignType == "0"){
                                           item3.selectType = true
                                        }else{
                                            item3.selectType = false
                                        }
                                    item3.assignIds =item4.ids
                                    item3.remark =  item4.remark
                                    }
                                })
                            })
                            }
                        return
                        }
                    })
                })
                this.methodList = JSON.parse(JSON.stringify(this.methodList_copy))
            })
        },
        // 所有权限菜单节点数据
        getMenuAllCheckedKeys() {
            // 目前被选中的菜单节点
            let checkedKeys = this.$refs.menu.getCheckedKeys();
            let redata = []
            checkedKeys.forEach(item1 =>{
                this.methodList.forEach(item2=>{
                    if(item2.taskId ==item1){
                        let tag = {
                            methodId:item2.taskId,
                            tasks:[]
                        }
                        item2.methodTasks.forEach(item3=>{
                            let assignType=""
                            if(item3.selectType){
                                assignType = "0"
                            }else{
                                assignType = "1"
                            }
                            let task={
                                "taskId":item3.taskId,
                                "assignType":assignType,
                                "ids":item3.assignIds,
                                "remark":item3.remark
                            }
                            tag.tasks.push(task)
                        })
                    redata.push(tag)
                    }
                })
            })
         
            return redata;
        },
        //指派对象操作
        handleAssign(val,ty){
            this.$forceUpdate()
            let valueObj = undefined
            if(ty=='userOptions'){
                valueObj= this.userOptions.filter(
                    (item)=>{return item.id == val;});
            }
            else{
                valueObj= this.agencyOptions.filter((item)=>{return item.value == val;});
            }
            // this.taskForm.assignName = valueObj.label;
        },
        //选择机构和成员切换
        selectTypeFun(data){
            this.methodList.map(item=>{
                if(item.methodTasks){
                    item.methodTasks.map(a=>{
                        if(a.taskId == data.taskId)
                                    a.assignIds = []
                        })
                }
            })
        },
        //文件上传成功的钩子
        handlePreview(){},
        //文件移除的钩子
        handleRemove(){},
        //提交按钮
        submitForm(){},
        //
    },
};
</script>

<style lang="scss" scoped>
.el-form{
    background: #fff;
    .addTitle{
        padding-left: 20px;
    }
    .formBody{
        padding: 0px 40px 40px 40px;
        .address{
            width:320px;
            margin-left: 20px;
        }
        .addressOptions{
            width: 300px;
        }
        .labelWidth{
            width: 640px;
        }
        .labelWidth2{
            width: 350px;
        }
        .startTime,.endTime{
            width: 310px;
            margin-right: 20px;
        }
        .row{
            display: inline-block;
            // height: 50px;
            width: 250px;
        }
        .selectType{
            margin-right: 5px;
        }
        .remark{margin-left: 20px;width: 500px;}
    }
}
.finishRow{
    margin-top: 20px;
    position: absolute;
    bottom: 5px;
    left: 48%;
}
.el-icon-upload{
    font-size: 24px;
    color: #409EFF ;
}
.el-icon-upload:hover{
    font-size: $main-color;
}
</style>